<template>
	<PageWrapper title="上传组件示例">
		<a-alert message="上传文件" />
		<BasicUpload
			title="上传文件"
			explainText="在这里添加解释性语言!"
			:maxSize="5"
			:maxNumber="3"
			@change="handleChange"
			:api="uploadFile"
			class="my-5"
			:accept="['file/*']"
			:hidePreview="false"
			btnType="default"
			@delete="handleDelete"
			@preview="handlePreview"
			@preview-download="handleDownload"
			@preview-delete="handlePreviewDelete"
		/>

		<a-alert message="嵌入表单,加入表单校验" />
		<BasicForm @register="register" @submit="handleSubmit" class="my-5" />

		<a-alert message="上传图片，请打开控制台查看结果" />
		<PictureCardUpload class="my-5" :maxNumber="3" @change="handleImg"></PictureCardUpload>
	</PageWrapper>
</template>
<script lang="ts">
import { defineComponent, toRaw } from 'vue';
import { BasicUpload, BasicForm, PageWrapper } from '#/components';
import { useForm } from '#/hooks';
import type { FileChangeEventType, FormSchema, PreviewFileItem } from '#/types';
import { PictureCardUpload } from '@/components/Upload';
import { useMessage } from '@/hooks/web/useMessage';
import { Alert } from 'ant-design-vue';
import { uploadFile } from '@/api/demo';

const schemas: FormSchema[] = [
	{
		field: 'field1',
		component: 'Upload',
		label: '附件',
		colProps: {
			span: 8,
		},
		helpMessage: '限制类型为图片',
		// rules: [{ required: true, message: '请选择上传文件' }],
		componentProps: {
			api: uploadFile,
			title: '上传文件',
			maxSize: 5,
			maxNumber: 3,
			accept: ['image/*'],
		},
	},
	{
		field: 'field2',
		component: 'PictureCardUpload',
		label: '图片',
		colProps: {
			span: 12,
		},
		required: true,
		helpMessage: '限制类型为图片',
		componentProps: {
			maxSize: 5,
			maxNumber: 3,
		},
	},
	{
		field: 'accessoryUrl',
		label: '通知书',
		component: 'SimpleUpload',
		required: true,
		componentProps: {
			maxSize: 5,
			maxNumber: 3,
		},
	},
];
export default defineComponent({
	components: { BasicUpload, BasicForm, PageWrapper, [Alert.name]: Alert, PictureCardUpload },
	setup() {
		const { createMessage } = useMessage();
		const [register] = useForm({
			labelWidth: 120,
			schemas,
			actionColOptions: {
				span: 16,
			},
		});

		// 上传时点击确定和预览时点击删除触发
		function handleChange(list: string[], type: FileChangeEventType) {
			console.info(`文件列表为${JSON.stringify(list)}，类型为${type}`);
			if (type == 'preview-delete') return;
			createMessage.success('上传成功');
		}

		// 在这里调用上传时删除文件接口，record为上传图片后的接口返回值 | undefined
		function handleDelete(record: Recordable) {
			console.log('上传时删除 >>', record);
		}

		function handleImg(value: any[]) {
			console.log('返回的imgids 为 >>>', toRaw(value));
		}

		function handleSubmit(e) {
			console.log(e);
		}

		function explainText() {
			return '在这里添加解释性语言!';
		}

		// 文件预览
		function handlePreview(url: string) {
			console.log('点击文件预览 >>', url);
		}

		function handleDownload(record: PreviewFileItem) {
			console.log('预览文件时下载 >>', record);
		}

		// 在这里调用预览时删除文件接口，url:/upload/securityaccessoryupload/xxx.png
		// 预览时删除：先触发@preview-delete 再触发 @change
		function handlePreviewDelete(url: string) {
			console.log('预览文件时删除 >>', url);
		}

		return {
			explainText,
			handleChange,
			handleImg,
			handlePreview,
			handleDelete,
			uploadFile,
			register,
			handleSubmit,
			handleDownload,
			handlePreviewDelete,
		};
	},
});
</script>
